import React from 'react'
import BaseComponent from '../../components/common/baseComponent'
import {
  View
} from 'react-native'

import StyleSheet from '../../utils/rzStyleSheet'

import { connect } from 'react-redux'

import NativeTableView from '../../components/native/tableView'

import {
  WINDOW_WIDTH,
  WINDOW_HEIGHT
} from '../../constants/varibles'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    // alignItems: 'stretch',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  },
  tableView: {
    height: WINDOW_HEIGHT,
    width: WINDOW_WIDTH,
    top: 0
  }
})

class TableView extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'TableView'
  }

  render () {
    return (
      <View style={styles.container}>
        <NativeTableView
          dataArray={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]}
          style={styles.tableView}
        />
      </View>
    )
  }
}

TableView.propTypes = {
}

TableView.navigationOptions = {
  headerTitle: 'TableView'
}

function mapStateToProps (state) {
  return {
  }
}

function mapDispatchToProps (dispatch) {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TableView)
